<template>
  <div id="search">
    <div>
      <div id="box">
        <i class="iconfont icon-sousuo" style="font-size:22px;color:#D7DADB;"></i><input type="text" v-model="keyword">
      </div>
      <div id="submit" @click="search">Go</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Search",
  data(){
    return {
      keyword: ""
    }
  },
  methods:{
    search(){
      window.sessionStorage.setItem("keyword",this.keyword)
      window.sessionStorage.setItem("tag","")
      this.$emit("search")
    }
  }
}
</script>

<style scoped>
#search{
  width:100%;
  height:50px;
  background-color:#D7DADB;

  position:sticky;
  top:0;

  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;

  /*box-shadow: 1px 1px 2px 2px #D7DADB;*/
}

#search > div{
  width:85%;
  height:40px;
}
#search > div > div{
  display: inline-block;
  box-sizing: border-box;
  line-height:40px;
}
#box{
  width:70%;
  height:40px;
  background-color: #FFFFFF;
  vertical-align: top;
  padding-left:10px;

}
#submit{
  width:10%;
  height:40px;
  background-color: #FC4349;
  text-align: center;
  color:white;
  font-size:24px;
  cursor:pointer;
}

#box input{
  width:90%;
  height:80%;
  outline: none;
  vertical-align: center;
  border:none;
  padding-left:10px;
  font-size:22px;
  color:#2C3E50;
}
</style>
